<template>
	<view class="wrap">
	<view class="wrap__header">
		<uni-icons type="left" size="24" color="#fff" @click="backClick"></uni-icons>
		<text class="header__title">{{$t('in.histoart')}}</text>
		<image src="@/static/icons/cash_history.png" mode="widthFix" class="header__icon" style="opacity: 0;"></image>
	</view>
	<scroll-view scroll-y="true" class="all" @scrolltolower="loadMore">
		<view class="wrap__scroll">
			<view class="scroll__header">
				<view class="header__item">{{ $t('order.order') }}</view>
				<view class="header__item">{{ $t('amount.amount') }}</view>
				<view class="header__item">{{ $t('cash.date') }}</view>
				<view class="header__item">{{ $t('status.status') }}</view>
				<view class="header__item"></view>
			</view>
		
			<view class="scroll__list">
				<view class="list__item" v-for="(item, index) in recordsList" :key="index">
					<view class="item__name">
						<view class="name__text">{{item.id}}</view>
					</view>
					<view class="item__direction">
						{{item.money}}
					</view>
					<view class="item__price">
						<view class="price__num">{{item.createtime}}</view>
					</view>
					<view class="item__type" v-if="item.status == '1'">
						{{ $t('success.success') }}
					</view>
					<view class="item__type" v-if="item.status == '2'">
						{{ $t('default.default') }}
					</view>
					<view class="item__type" v-if="item.status == '0'">
						{{ $t('NO.SHENG') }}
					</view>
					<view class="item__type" v-if="item.status == '3'">
						
					</view>
					<view class="item__market">
						
						<button v-if="item.status == '2'" class="market_btn" @click="showMarket(item,index)">{{ $t('watch.watch') }}</button>
					</view>
				</view>
			</view>
		
		</view>
		</scroll-view>
		<EnterMarket v-if="isShowEnter" :isShowEnter.sync="isShowEnter" :info="info"></EnterMarket>
	</view>
	
	<!-- 			<view class="history__page">
					<view class="page__item" @click="pageClick('prev')">
						<uni-icons type="left" color="#fff" size="14" class="item__icon"></uni-icons>
						<text class="item__title">{{ $t('trage.uppage') }}</text>
					</view>
					<view class="page__item" @click="pageClick('next')">
						<text class="item__title">{{ $t('trage.downpage') }}</text>
						<uni-icons type="right" color="#fff" size="14" class="item__icon"></uni-icons>
					</view>
				</view> -->
</template>

<script>
	import EnterMarket from '@/components/trade/EnterMarket.vue'
	export default{
		components:{
			EnterMarket
		},
		data(){
			return {
				type:1,
				isShowEnter:false,
				statusList:[
					{title:this.$t("trade.done"), status:1}, 
					{title:this.$t("trade.wait"), status:2},
					{title:this.$t("trade.cancel"), status:5}],
				statusIndex:0,
				recordsList:[],
				pageIndex:1,
				totalPage:0, //总页数
				pageList:[],
				total:0,
				isLoadAll:false,
			}
		},
		filters:{
			// 处理图片格式
			formatIcon(name){
				let obj = {
					KRW:"1",
					USD:"2",
					HKD:"3"
				}
				return `/static/icons/${obj[name]}.png`
			},
			formStatus(value){
				if(value == '1'){
					return this.$t('success.success')
				}
				if(value == '2'){
					return '失败'
				}
				if(value == '0'){
					return '未审核'
				}
			}
		},
		onLoad() {
			this.getTradeRecords()
		},
		methods:{
			showMarket(item){
				this.isShowEnter = true
				this.info = item.beizhu
			},
				loadMore(){
					if(this.isLoadAll){
						uni.showToast({
							title: this.$t('empty.tips'),
							icon:"none"
						})
						return
					}
					this.pageIndex ++
					this.getTradeRecords()
				},
			
			// onReachBottom() { //触底事件
			// 			if (this.pageIndex * this.pageSize >= this.total) {
			// 				uni.showToast({
			// 					title: '没有更多数据了',
			// 					icon: 'none',
			// 					duration: 1000
			// 				});
			// 				setTimeout(() => {
			// 					uni.hideLoading()
			// 				}, 500)
			// 			} else {
			// 				if (this.pageIndex <= this.pageIndex - 1) {
			// 					setTimeout(() => {
			// 						uni.hideLoading()
			// 					}, 500)
			// 				} else {
			// 					uni.showLoading({
			// 						title: 'loading'
			// 					});
			// 					this.pageIndex++
			// 					this.getTradeRecords()
			// 				}
			// 				setTimeout(() => {
			// 					uni.hideLoading()
			// 				}, 500)
			// 			}
			// 		},
			

			async getTradeRecords(){
				uni.showLoading({
					title:this.$t('loading.loading'),
					mask:true
				})
			/* 	let {status} = this.statusList[this.statusIndex] */
				let res = await this.$api.inMoneyhistory(this.type)
				if(res.code === 1 && res.data){
					uni.hideLoading()
					this.recordsList = res.data.data
					this.totalPage = res.data.last_page
					let total = res.data.total
					if(this.recordsList.length >= total){
						this.isLoadAll= true
					}
				}
			},
			// 分页切换
			// pageClick(type){
			// 	if(type==="prev"){
			// 		if(this.pageIndex >1){
			// 			this.pageIndex -- 
			// 			this.getTradeRecords()
			// 		}
			// 	}else{
			// 		if(this.pageIndex < this.totalPage){
			// 			this.pageIndex ++
			// 			this.getTradeRecords()
			// 		}else{
			// 			uni.showToast({
			// 				title:"no more",
			// 				icon:"none"
			// 			})
			// 		}
			// 	}
			// },
			backClick(){
				uni.switchTab({
					url:"/pages/trade/trade"
				})
			},
			navClick(index){
				if(this.statusIndex !== index){
					this.statusIndex = index
					this.getTradeRecords()
				}
			}
		}
	}
</script>

<style lang="scss">
	.all{
		padding:  0 30rpx;
		box-sizing: border-box;
		height: calc(100vh - 140rpx);
	}
	.market_content{
		width: 50%;
		height: 400rpx;
		border-radius: 15rpx;
		background-color: #161827;
		margin: auto;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		
	}
	.wrap{
		&__header{
			height: 128rpx;
		/* 	background: #161827; */
			@include flexRowAlign(space-between);
			padding: 0 30rpx;
			box-sizing: border-box;
			.header__title{
				flex: 1;
				font-size: 46rpx;
				font-weight: 800;
				color: #fff;
				text-align: center;
			}
			.header__icon{
				width: 42rpx;
				height: 42rpx;
			}
		}
		&__nav{
			@include flexRowAlign();
			.nav__item{
				width: 250rpx;
				height: 88rpx;
				background: #161827;
				@include flexCenter(column);
				.item__title{
					font-size: 32rpx;
					font-weight: bold;
					color: #FFFFFF;
				}
				.item__line{
					width: 30rpx;
					height: 4rpx;
					background: transparent;
					border-radius: 2rpx;
					margin-top: 6rpx;
				}
			}
			.nav__item--active{
				.item__title{
					color: #458EF4;
				}
				.item__line{
					background: #458EF4;
				}
			}
		}
		&__scroll{
			margin-top: 20rpx;
			box-sizing: border-box;
			.scroll__header{
				@include flexRowAlign(space-between);
				height: 64rpx;
				margin-top: 20rpx;
				.header__item{
					@include flexRowAlign(center);
					font-size: 28rpx;
					color: #999999;
					width: 180rpx;
					/* &:first-child{
						justify-content: flex-start;
					}
					&:not(:nth-child(1)){
						flex: 1;
					} */
				}
			}
			.scroll__list{
				.list__item{
					@include flexRowAlign(space-between);
					height: 130rpx;
					// border-top: 1rpx solid #CCCCCC;
					text-align: center;
					.item__name{
						/* @include flexCenter(column);
						align-items: flex-start; */
						display: flex;
						justify-content: center;
						align-items: center;
						width: 140rpx;
						.info_img{
							width: 30rpx;
							height: 30rpx;
							border-radius: 50%;
							margin-right: 15rpx;
						}
						.name__text{
							font-size: 28rpx;
							color: #fff;
							/* width: 100%; */
							@include textOver();
						}
						.name__info{
							@include flexRowAlign()
							margin-top: 10rpx;
							.info__tag{
								color: #161827;
								font-size: 20rpx;
								padding: 4rpx 6rpx;
								background: #DE2804;
								border-radius: 6rpx;
								box-sizing: border-box;
								@include flexCenter();
							}
							.info__code{
								font-size: 20rpx;
								font-weight: 500;
								color: #161827;
								margin-left: 10rpx;
							}
							.info__icon{
								width: 30rpx;
								height: 30rpx;
								margin-right: 10rpx;
								border-radius: 50%;
							}
						}
					}
					.item__direction{
						@include flexCenter(column);
						flex: 1;
						font-size: 26rpx;
						color: #fff;
					}
					.itemselldatagreen{
						color:#2DC065;
					}
					.itemselldatared{
						color:#ff0000;
					}
					.item__price{
						@include flexCenter(column);
						flex: 1;
						.price__num{
							font-size: 30rpx;
							color: #fff;
							&:last-child{
								font-size: 24rpx;
								margin-top: 4rpx;
							}
						}
					}
					.item__type{
						text-align: center;
						flex: 1;
						font-size: 26rpx;
						font-weight: 500;
						color: #161827;
					}
					.itemselldatagreen{
						color:#2DC065;
					}
					.itemselldatared{
						color:#ff0000;
					}
					.item__market{
						text-align: center;
						flex: 1;
						font-size: 26rpx;
						font-weight: 500;
						color:#2DC065;
						.market_btn{
							width: 120rpx;
							height: 40rpx;
							text-align: center;
							line-height: 40rpx;
							font-size: 14rpx;
							background-color: #458EF4;
							color:#161827;
						}
					}
				}
			}
			.history__page{
				@include flexRowAlign(space-between);
				box-sizing: border-box;
				padding: 0 20rpx;
				margin-top: 16rpx;
				.page__item{
					width: 340rpx;
					height: 80rpx;
					background: #17201D;
					border-radius: 8rpx;
					@include flexRowAlign(center);
					&:active{
						opacity: 0.5;
					}
					.item__title{
						font-size: 26rpx;
						color: #161827;
					}
					.item__icon{
						margin-top: 4rpx;
					}
					&:first-child{
						.item__title{
							margin-left: 20rpx;
						}
					}
					&:last-child{
						.item__title{
							margin-right: 20rpx;
						}
					}
				}
			}
		}
	}
</style>